<template>
	<view class="addres_pop-box">
		<view class="addres_pop-box_title">
			地址选择
		</view>
		<view class="cooseList">
			<div class="cooseList_item" >
				
				<view class="cooseList_item" @click="changeBar(index)" :class="selectIndex==index?'choose':''" v-for="(item,index) in chooselist" :key="index">
						{{item.name}}
				</view>
			</div>
		</view>
		<scroll-view :scroll-y="true" class="scroll-Y">
			<view v-if="list.length==0" style="width: 100%;" class="uni-flex uni-align-center">
				<u-loading  mode="flower"></u-loading>
			</view>
			<!-- -->
			<view v-else class="select_ittem" :class="chooselist[selectIndex].name == item.name?'choose':''"   @click="chooseCity(item)" v-for="(item,index) in list" :key="index">
				{{item.name}}
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default{
		watch: {
			values:{
				handler (newVal, oldVal) {
					if(newVal.length>0){
						if(newVal.length==1){
							// 只到省份
							this.chooselist = newVal
							this.getCity(0)
							this.selectIndex = 0
						}else{
							this.chooselist = newVal
							this.selectIndex = 2
							this.list = []
							this.yes= true
							this.getCity(this.chooselist[1].code)
						}
					}else{
						this.getCity(0)
					}
				},	
				deep: false, // 是否深度监听
				immediate: true, // 是否在组件创建时立即执行回调函数
			},
		
		},
		
		props: {
			// 缺省图
			values:{
				type: Array,
				default: []
			},
			isprovince:{
				type: Boolean,
				default:false
			}
			
			
		},
		data(){
			return {
				chooselist:[
					{
						code:0,
						name:"请选择"
					}
				],
				yes:false,
				selectIndex:0,//taber的index
				list : []
			}
		},
		mounted() {
			// 获取省份
			// if(this.yes){
			// 	this.getCity(this.chooselist[1].code , 2)
			// }
		
		},
		methods: {
			changeBar(index){
				// 切换taber 的值 
				if(this.chooselist[index].name == '请选择'){
					return
				}
				this.selectIndex = index
				var arr = []
				if(index ==0 ){
					arr = [...[],...[this.chooselist[0]]]
					this.chooselist = arr
					this.getCity(0)
				}
				if(index ==1 ){
					arr = [...[],...[this.chooselist[0],this.chooselist[1]] ]
					this.chooselist = arr
					this.getCity(this.chooselist[0].code , 1)
				}
			},
			getCity(code){
				var data = {
					pid:code
				}
				this.list = []	
				var that = this
				this.$wqzApi.city(data).then(res=>{
					this.list = res.data
				})
			},
			
			chooseCity(item){
				// 点击省市区
				this.chooselist[this.selectIndex].name = item.name
				this.chooselist[this.selectIndex].code = item.code
				if(this.isprovince){
					// 只选择到省份
					this.$emit('change' , this.chooselist)
					return
				}
				if(this.selectIndex<2){
					if(this.chooselist.length<3){
						this.chooselist.push({
							code:null,
							name:"请选择"
						})
					}
				}
				
				if(this.selectIndex == 0){
					this.selectIndex=1
					this.getCity(item.code)
					return
				}
				if(this.selectIndex == 1){
					this.selectIndex=2
					this.getCity(item.code )
					return
				}
				if(this.selectIndex == 2){
					console.log(this.list)
					this.$emit('change' , this.chooselist)
				}
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import url("index.css");
</style>